<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的图书馆</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            background: linear-gradient(to right, #66a6ff, #89f7fe);
            padding: 0 10px;
        }

        .login-container {
            background: #fff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            width: 320px;
            margin-bottom: 20px;
        }

        .login-container h2 {
            margin-bottom: 30px;
            text-align: center;
        }

        .form-group {
            margin-bottom: 20px;
            position: relative;
        }

        .form-group label {
            position: absolute;
            left: 10px;
            top: 8px;
            font-size: 12px;
        }

        .form-group input {
            width: 100%;
            padding: 10px 10px 10px 40px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 14px;
        }

        .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 16px;
        }

        .form-group button:hover {
            background-color: #0056b3;
        }

        /* 警示框样式 */
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 5px;
            display: none; /* 默认隐藏 */
            opacity: 0; /* 初始透明 */
            transition: opacity 0.5s ease; /* 动画效果 */
            width: 300px; /* 设置警示框宽度 */
            position: relative;
        }

        .alert.show {
            display: block; /* 显示警示框 */
            opacity: 1; /* 设置透明度 */
        }

        .alert.success {
            background-color: #d4edda; /* 成功背景色 */
            color: #155724; /* 成功文字色 */
            border: 1px solid #c3e6cb; /* 成功边框色 */
        }

        .alert.error {
            background-color: #f8d7da; /* 错误背景色 */
            color: #721c24; /* 错误文字色 */
            border: 1px solid #f5c6cb; /* 错误边框色 */
        }

        .alert .closebtn {
            position: absolute;
            top: 0;
            right: 10px;
            font-size: 20px;
            cursor: pointer;
        }

        /* 复选框样式 */
        .checkbox-label {
            display: inline-block;
            vertical-align: middle;
            margin-left: 5px;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div id="alert" class="alert">
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
    <span id="alertMessage"></span>
</div>
<div class="login-container">
    <h2>图书管理系统</h2>
    <form id="loginForm">
        <div class="form-group">
            <label for="username">帐号</label>
            <input type="text" id="username" name="username" placeholder="请输入帐号" required>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required>
        </div>
        <div class="form-group">
            <input type="checkbox" id="remember" name="remember">
            <label for="remember" class="checkbox-label">保持登录状态</label>
        </div>
        <div class="form-group">
            <button type="submit">登录</button>
        </div>
        <a href="#">忘记密码</a>
    </form>
</div>

<script>
    document.getElementById('loginForm').addEventListener('submit', function (event) {
        event.preventDefault(); // 防止默认提交行为
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const alertDiv = document.getElementById('alert');
        const alertMessage = document.getElementById('alertMessage');

        alertDiv.style.display = 'none'; // 隐藏警示框以准备显示新的消息
        alertDiv.classList.remove('show', 'success', 'error'); // 清除所有状态

        fetch('/users/login/' + username + '/' + password, {
            method: 'GET'
        })
            .then(response => response.json())
            // 你需要在then中处理成功地响应时存储用户编号
            .then(data => {
                console.log(data);
                if (data.status === "200") {
                    // 假设从响应数据中获取用户编号
                    const userId = data.data; // 更新此处以获取正确的用户编号字段

                    // 将用户编号存储到SessionStorage
                    sessionStorage.setItem('userId', userId);

                    alertMessage.textContent = '登录成功';
                    alertDiv.classList.add('success'); // 添加成功类
                    alertDiv.classList.add('show'); // 显示警示框
                    alertDiv.style.display = 'block'; // 设置为显示状态以便触发 opacity 动画

                    //设置延时再跳转
                    setTimeout(() => {
                        window.location.href = '/books'; // 跳转到/books页面
                    }, 100); // 100毫秒后跳转
                } else {
                    alertMessage.textContent = '登录失败: ' + data.message;
                    alertDiv.classList.add('error'); // 添加错误类
                    alertDiv.classList.add('show'); // 显示警示框
                    alertDiv.style.display = 'block'; // 设置为显示状态以便触发 opacity 动画
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alertMessage.textContent = '请求失败，请稍后重试';
                alertDiv.classList.add('error'); // 添加错误类
                alertDiv.classList.add('show'); // 显示警示框
                alertDiv.style.display = 'block'; // 设置为显示状态以便触发 opacity 动画
            });
    });
</script>
</body>
</html>
